<template>
  <div class="com-page">
    <div ref="container" class="com-container" />
  </div>
</template>

<script>
import { setEcharts, setEchartOptions } from '@/api/echarts/bar.js'
import _ from 'lodash'
export default {
  data() {
    return {
      seriesData: '',
      yAxisData: '',
      current: 0,
      size: 5,
      total: 0
    }
  },
  async mounted() {
    await this.initCharts()
    this.setEcharts()
    // 设置定时器，分页展示，每页5条数据
    setInterval(() => {
      if (this.current >= this.seriesData.length - 1) {
        this.current = -1
      }
      this.current += 1
      this.setEcharts()
      this.screenAdapter()
    }, 5000)
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 获取echarts的数据
    async initCharts() {
      const { data } = await this.$http.get('/seller')
      const seriesData = data.map((item) => item.value)
      this.total = data.length
      const yAxisData = data.map((item) => item.name)
      this.seriesData = _.chunk(seriesData, 5)
      this.yAxisData = _.chunk(yAxisData, 5)
    },
    // 渲染echarts图表 柱形图
    setEcharts() {
      setEcharts(
        this.$refs.container,
        this.yAxisData[this.current],
        this.seriesData[this.current]
      )
    },
    // 屏幕分辨率 改变时 option 变化
    screenAdapter() {
      const titleFontSize = (this.$refs.container.offsetWidth / 100) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: {
          barWidth: titleFontSize,
          itemStyle: {
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
          }
        }
      }
      setEchartOptions(this.$refs.container, adapterOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
